<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>房源管理</el-breadcrumb-item>
      <el-breadcrumb-item>房源列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <el-form :model="houseForm" class="demo-form-inline" >
        <el-form-item>
          <el-input style="width:150px;height:30px;"  placeholder="房子地址" v-model="houseForm.addr"></el-input>
          <el-select  style="width:150px;height:30px; margin-left: 10px"  v-model="houseForm.status" placeholder="选择状态">
            <el-option label="待审核" :value="0"></el-option>
            <el-option label="已审核" :value="1"></el-option>
            <el-option label="已成交" :value="2"></el-option>
          </el-select>
          <el-button @click="searchList" style="margin-left: 10px" plain type="info">搜索</el-button>
          <el-button @click="searchEmpty" plain type="info">清空</el-button>
          <el-button @click="courseFormVisible=true" type="primary">添加</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="houseList"
        stripe
        style="width: 100%">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          label="房间图片" width="120">
          <template slot-scope="scope">
            <img  v-if="scope.row.pic!=null" :src="'/api/house-charter/house/download/'+scope.row.pic" width="50px" height="50px">
          </template>
        </el-table-column>
        <el-table-column
          label="房屋名称"
          prop="name"
          width="120">
        </el-table-column>
        <el-table-column
          label="房屋地址"
          prop="addr"
          width="120">
        </el-table-column>
        <el-table-column
          label="房东名称"
          prop="ownerName"
          width="120">
        </el-table-column>
        <el-table-column
          label="价格"
          width="120">
          <template slot-scope="scope">
            ${{scope.row.lprice}}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          prop="courseStatus"
          width="120">
          <template slot-scope="scope">
            {{scope.row.status | courseStatusFit}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="getCourse(scope.row.id)" v-if="scope.row.status==0" size="small" type="text">修改</el-button>
            <el-button @click="delCourse(scope.row.id)" v-if="scope.row.status==0" size="small" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.currentPage"
        :page-size="page.pageSize"
        :page-sizes="[5, 10, 20, 40]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

      <el-dialog  :append-to-body=true :close-on-click-modal="false" :title="house.id==null?'添加房源':'编辑房源'" :visible.sync="courseFormVisible"
                  @closed="crearUserForm">
        <el-form :model="house" label-width="100px" label-position="5px" ref="courseForm" :rules="rules">
          <el-row :gutter="22">
            <el-col :span="8">
              <el-form-item label="房屋名称" prop="name" >
                <el-input  v-model="house.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="8">
              <el-form-item label="房屋地址" prop="addr" >
                <el-input  v-model="house.addr"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="8">
              <el-form-item label="价格" prop="lprice">
                <el-input-number v-model="house.lprice"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="房屋图片" prop="pic">
                <el-upload
                  class="avatar-uploader"
                  action="/api/house-charter/house/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="house.pic!=null" :src="'/api/house-charter/house/download/'+house.pic" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="22">
            <el-col :span="11">
              <el-form-item label="房产证图片" prop="ppCard">
                <el-upload
                  class="avatar-uploader"
                  action="/api/house-charter/house/upload"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess1"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="house.ppCard!=null" :src="'/api/house-charter/house/download/'+house.ppCard" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="courseFormVisible = false">取 消</el-button>
          <el-button @click="saveCourse" type="primary">确 定</el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
  export default {
    name: "landlord",
    data() {
      return {
        houseForm: {},
        page: {
          currentPage: 0,
          pageSize: 5
        },
        total: 0,
        houseList:[],
        courseFormVisible: false,
        house:{pic:'',ppCard:''},
        rules:{
          name: [{ required: true, message: '请输入名房源名称', trigger: 'blur' }],
          lprice: [{ required: true, message: '请输入房屋价格'}, { type: 'number', message: '房屋价格必须为数字值'}],
          addr: [{ required: true, message: '请输入房源地址', trigger: 'blur' }],
          ppCard: [{ required: true, message: '请选择房产证', trigger: 'blur' }],
          pic: [{ required: true, message: '请选择房屋图片', trigger: 'blur' }],
        },
        auth:{token:null},
        user:{}
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {//上传完成后回调
        this.house.pic = res.result.path
      },
      handleAvatarSuccess1:function(res, file){
        this.house.ppCard = res.result.path
      },
      beforeAvatarUpload(file) {//=,=== 和 == 比较的是内容
        const isJPG = file.type === 'image/jpeg'|| file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
      getCourse: function (id) {//查询当前id的课程
        this.$http.get("house-charter/house/getByHoueseId/" + id).then((res) => {
          if (res.data.success) {
            this.house = res.data.result //赋值
            this.courseFormVisible = true //显示dialog框
          } else {
            this.$message.error(res.data.message)
          }
        })
      },
      crearUserForm: function () {//清空数据
        this.house = {}
      },
      saveCourse: function () { //房子保存
        this.$refs['courseForm'].validate((valid) => {
          if (!valid) {
            return
          }
            this.house.owner = JSON.parse(sessionStorage.getItem("user")).id;
            this.house.ownerName = JSON.parse(sessionStorage.getItem("user")).showName;
            this.$http.post("house-charter/house/addHouse", this.house).then((res) => {
              //如何提示
              if (res.data.success) {
                this.$message({
                  message: res.data.message,
                  type: 'success'
                })
              } else {
                this.$message.error(res.data.message)
              }
            })
          //关闭dialog框
          this.courseFormVisible = false
          //重新加载列表
          this.searchList()
        })
      },
      delCourse:function (id) {//删除课程
        this.$http.get("house-charter/house/deleteHouse/"+id).then((res)=>{
          if (res.data.success) {
            this.$message({
              message: res.data.message,
              type: 'success'
            })
          } else {
            this.$message.error(res.data.message)
          }
          //重新加载列表
          this.searchList()
        })
      },
      searchEmpty:function(){//清空
        this.searchForm = {}
      },
      handleSizeChange: function (val) {
        this.page.pageSize = val
        this.searchList()
      },
      handleCurrentChange: function (val) {
        this.page.currentPage = val
        this.searchList()
      },
      searchList: function () {
        this.$http.post("house-charter/house/list/" + this.page.currentPage + "/" + this.page.pageSize, this.houseForm).then((res) => {
          this.houseList = res.data.result.list
          this.total = res.data.result.total
        })
      },
    },
    filters: {
      courseStatusFit: function(val){
        if(val==1) return "已审核"
        if(val==2) return "已成交"
        if(val==0) return "未审核"
      }
    },
    mounted() {
      this.searchList()//列表展示
      this.houseForm.owner=JSON.parse(this.sessionStorage.getItem("user")).id;
    },
  }
</script>

<style scoped>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
